<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="10">
				<div class="tools" @click.prevent="collapse">
					<i class="el-icon-menu"></i>
				</div>
			</el-col>
			<el-col :span="4" class="userinfo">
				<!-- <el-dropdown trigger="hover"> -->
					<span class="el-dropdown-link userinfo-inner">欢迎：{{sysUserNickname}}</span>
					<a class="logout" href="javascript:;" @click="logout">退出</a>
					<!-- <el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出</el-dropdown-item>
					</el-dropdown-menu> -->
				<!-- </el-dropdown> -->
			</el-col>
		</el-col>
		<el-col :span="24" class="main" :class="collapsed?'menu-collapsed':'menu-expanded'">
			<sidebar :collapsed="collapsed" :menus="menus"> </sidebar>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<!-- 内容区块 -->
					<el-col :span="24" class="content-wrapper">
						<transition :name="transitionName" mode="out-in">
  							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>

	import {get, post, toast} from '../api/common';
	import * as url from '../api/url';
	import * as constant from '../constant';
	import sidebar from './slidebar.vue';
	import cookie from 'js-cookie'
	import {genTree} from '../util/tools'
	import menus from './menus'
	import auth, {authLogin} from '../util/auth'

	export default {
		data() {
			return {
				sysName: 'CMS系统',
				collapsed: false,
				sysUserName: '',
				sysUserNickname: 'admin',
				menus: menus,
				transitionName: 'fade',
			}
		},
		computed:{
			resourceList(){
				return this.$store.state.resourceList;
			}
		},
		methods: {
			//退出登录
			logout: function () {
				this.$confirm('确认退出吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then( () => {
					if(authLogin){
						auth.clearToken();
						this.$router.push('/login')
					}else{
						location.href = '/logout';
					}
				})
			},
			//折叠导航栏
			collapse:function() {
				this.collapsed = !this.collapsed;
			},
		},
		components: {
			sidebar
		},
		watch: {
			// '$route' (to, from) {
			//   	const toDepth = to.path.split('/').length
			//   	const fromDepth = from.path.split('/').length
			//   	this.transitionName = toDepth < fromDepth ? 'slide-in-left' : 'slide-in-right'
			// }
		},
		created(){
			post(url.GET_USERINFO).then(data=>{
				this.sysUserName = data.account;
				this.sysUserNickname = data.name;
			})
		},
		mounted(){

		}
	}

</script>

<style lang="scss">
	$color-primary:#373d41;
	$sildebarWidth: 200px;
	$sidebarHeight: 50px;
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: $sidebarHeight;
			line-height: $sidebarHeight;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				float: right;
				.userinfo-inner {
					padding-right: 10px;
					// cursor: pointer;
					color:#fff;
					img {
						width: 30px;
						height: 30px;
						border-radius: 20px;
						margin: 5px 0px 10px 10px;
						float: right;
					}
				}
				.logout {
				    color: #ffffff;
			    	border-left: 1px solid #cccccc;
			    	padding-left: 10px;
			    	text-decoration: none;
					margin-right: 35px;
				}
			}
			.logo {
				//width:$sildebarWidth;
				height:50px;
				font-size: 20px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				text-align: center;
				img {
					width: $sidebarHeight;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:$sildebarWidth;
			}
			.logo-collapse-width{
				width: $sidebarHeight
			}
			.tools{
				padding: 0px 18px;
				height: $sidebarHeight;
				line-height: $sidebarHeight;
				cursor: pointer;
				.el-icon-menu{
					font-size: 18px;
				}
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: $sidebarHeight;
			bottom: 0px;
			overflow: hidden;
			aside {
				// flex:0 0 $sildebarWidth;
				width: $sildebarWidth;
				height: 100%;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					width: auto!important;
					z-index: 100;
					height: 100%;
					/*height: calc(100% - 30px);*/
				}
				.copy-right{
					height: 30px;
					font-size : 10px;
					line-height: 30px;
					text-align: center;
					color: white;
					background-color: #545c64;
					border-right: solid 1px #e6e6e6;
					display: none;
				}
				.el-menu-item {
					min-width: 100px;
					max-width: $sildebarWidth;
				}
				.collapsed{
					width: $sidebarHeight;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left: $sidebarHeight;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			&.menu-collapsed{
				.menu-aside {
					// flex:0 0 40px;
					width: $sidebarHeight;
				}
				.content-container {
					left: $sidebarHeight
				}
			}
			&.menu-expanded{
				.menu-aside {
					flex:0 0 $sildebarWidth;
					width: $sildebarWidth;
				}
				.content-container {
					left: $sildebarWidth;
				}
			}
			.content-container {
				// flex:1;
				position: absolute;
				left: $sildebarWidth;
				right: 0;
				bottom: 0;
				top: 0;
				overflow-y: auto;
				.grid-content {
					height: 100%;
					display: flex;
					flex-direction: column;
					.content-wrapper {
						// flex: 1;
						height: 100%;
						background-color: #f4f4f4;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>
